import type { BasicTableColumn } from '@/components/table';
import TableFieldType from '@/components/table/src/types/field-type';
import type { FormSchema } from '@/components/form';
import FormFieldType from '@/components/form/src/types/field-type';
import { STATUS_OPTIONS } from '@/constant';

const menuTypeOptions = [
  {
    label: '目录',
    value: 'M',
    type: 'info',
  },
  {
    label: '菜单',
    value: 'C',
    type: 'success',
  },
  {
    label: '按钮',
    value: 'F',
    type: 'warning',
  },
];

export const columns: BasicTableColumn[] = [
  {
    title: 'menuId',
    key: 'menuId',
    display: false,
    fieldType: TableFieldType.TEXT,
  },
  {
    title: '菜单名称',
    key: 'menuName',
    fieldType: TableFieldType.TEXT,
  },
  {
    title: 'parentId',
    key: 'parentId',
    display: false,
    fieldType: TableFieldType.TEXT,
  },
  {
    title: '显示顺序',
    key: 'orderNum',
    align: 'center',
    width: 90,
    display: false,
    fieldType: TableFieldType.TEXT,
  },
  {
    title: '路由地址',
    key: 'path',
    fieldType: TableFieldType.TEXT,
    width: 120,
    ellipsis: {
      tooltip: true,
    },
  },
  {
    title: '组件路径',
    key: 'component',
    fieldType: TableFieldType.TEXT,
    width: 120,
    ellipsis: {
      tooltip: true,
    },
  },
  {
    title: '路由参数',
    key: 'queryParam',
    display: false,
    fieldType: TableFieldType.TEXT,
  },
  {
    title: '是否外链',
    key: 'isFrame',
    display: false,
    fieldType: TableFieldType.BOOLEAN,
    width: 100,
    align: 'center',
    booleanOptions: {
      colorType: value => (value === '0' ? 'success' : 'error'),
    },
  },
  {
    title: '是否缓存',
    key: 'isCache',
    display: false,
    fieldType: TableFieldType.BOOLEAN,
    width: 100,
    align: 'center',
    booleanOptions: {
      colorType: value => (value === '0' ? 'success' : 'error'),
    },
  },
  {
    title: '菜单类型',
    key: 'menuType',
    fieldType: TableFieldType.TAG,
    tagOptions: {
      options: menuTypeOptions,
    },
  },
  {
    title: '是否显示',
    key: 'visible',
    fieldType: TableFieldType.BOOLEAN,
    width: 100,
    align: 'center',
    booleanOptions: {
      colorType: value => (value === '0' ? 'success' : 'error'),
    },
  },
  {
    title: '图标',
    key: 'icon',
    align: 'center',
    width: 90,
    fieldType: TableFieldType.ICON,
    sort: 2,
  },
  {
    title: '权限标识',
    key: 'perms',
    fieldType: TableFieldType.TEXT,
    display: false,
  },
  {
    title: '状态',
    key: 'status',
    fieldType: TableFieldType.BOOLEAN,
    width: 100,
    align: 'center',
    booleanOptions: {
      colorType: value => (value === '0' ? 'success' : 'error'),
    },
  },
  {
    title: '创建部门',
    key: 'createDept',
    display: false,
    fieldType: TableFieldType.TEXT,
  },
  {
    title: '备注',
    key: 'remark',
    display: false,
    fieldType: TableFieldType.TEXT,
  },
  {
    title: '创建时间',
    key: 'createTime',
    width: 120,
    ellipsis: {
      tooltip: true,
    },
    fieldType: TableFieldType.TEXT,
  },
];

export const formSchemas: FormSchema[] = [
  {
    field: 'menuId',
    label: '菜单ID',
    component: FormFieldType.INPUT,
    display: false,
  },
  {
    field: 'parentId',
    label: '上级菜单',
    component: FormFieldType.INPUT,
    display: false,
  },
  {
    field: 'menuName',
    label: '菜单名称',
    component: FormFieldType.INPUT,
    rules: [{ required: true }],
  },
  {
    field: 'menuType',
    component: FormFieldType.SELECT,
    label: '菜单类型',
    componentProps: {
      options: menuTypeOptions,
      valueField: 'value',
      defaultValue: 'M',
    },
  },
  {
    field: 'orderNum',
    component: FormFieldType.INPUT_NUMBER,
    label: '显示顺序',
    rules: [{ required: true }],
  },
  {
    field: 'path',
    label: '路由地址',
    component: FormFieldType.INPUT,
    display: (formData: Recordable) => formData.menuType !== 'F',
  },
  {
    field: 'component',
    label: '组件路径',
    component: FormFieldType.INPUT,
    display: (formData: Recordable) => formData.menuType === 'C',
  },
  {
    field: 'queryParam',
    label: '路由参数',
    component: FormFieldType.INPUT,
    display: (formData: Recordable) => formData.menuType === 'C',
  },
  {
    field: 'isFrame',
    label: '是否外链',
    component: FormFieldType.RADIO_GROUP,
    componentProps: {
      options: [
        {
          label: '是',
          value: '0',
        },
        {
          label: '否',
          value: '1',
        },
      ],
      defaultValue: '1',
    },
    display: (formData: Recordable) => formData.menuType !== 'F',
  },
  {
    field: 'isCache',
    label: '是否缓存',
    component: FormFieldType.RADIO_GROUP,
    componentProps: {
      options: [{
        label: '是',
        value: '0',
      }, {
        label: '否',
        value: '1',
      }],
      defaultValue: '0',
    },
    display: (formData: Recordable) => formData.menuType === 'C',
  },
  {
    field: 'visible',
    label: '显示状态',
    component: FormFieldType.RADIO_GROUP,
    componentProps: {
      options: [{
        label: '显示',
        value: '0',
      }, {
        label: '隐藏',
        value: '1',
      }],
      defaultValue: '0',
    },
    display: (formData: Recordable) => formData.menuType !== 'F',
  },
  {
    field: 'status',
    label: '菜单状态',
    component: FormFieldType.RADIO_GROUP,
    componentProps: {
      options: [{
        label: '正常',
        value: '0',
      }, {
        label: '停用',
        value: '1',
      }],
      defaultValue: '0',
    },
    display: (formData: Recordable) => formData.menuType !== 'C',
  },
  {
    field: 'perms',
    label: '权限标识',
    component: FormFieldType.INPUT,
    display: (formData: Recordable) => formData.menuType !== 'M',
  },
  {
    field: 'icon',
    label: '图标',
    component: FormFieldType.ICON,
    display: (formData: Recordable) => formData.menuType !== 'F',
  },
  {
    field: 'remark',
    component: FormFieldType.INPUT,
    label: '备注',
    componentProps: {
      type: 'textarea',
    },
    giProps: {
      span: 2,
    },
  },
];

export const searchSchemas: FormSchema[] = [
  {
    field: 'menuName',
    label: '菜单名称',
    component: FormFieldType.INPUT,
  },
  {
    field: 'status',
    label: '菜单状态',
    component: FormFieldType.SELECT,
    componentProps: {
      options: STATUS_OPTIONS,
      valueField: 'value',
    },
  },
  {
    field: 'perms',
    label: '权限标识',
    component: FormFieldType.INPUT,
  },
];
